<template>
    <div class="p-6 bg-white rounded-lg shadow-lg">
        <div class="flex items-center font-bold w-full border-green-700 border-b-2 p-2">我的课程</div>
        <div
            v-for="course in courses"
            class="flex p-2 group justify-between hover:bg-green-700 transition-all duration-300 mt-2 rounded-md h-10 items-center cursor-pointer"
        >
            <div class="group-hover:hidden block transition-all">{{ course.name }}</div>
            <div class="group-hover:hidden block transition-all">{{ course.teacher }}</div>
            <div class="group-hover:block hidden text-white h-full w-full ">
                <div class="flex justify-between items-center">
                    <div>大纲</div>
                    <svg
                        xmlns="http://www.w3.org/2000/svg"
                        class="h-6 w-6"
                        fill="none"
                        viewBox="0 0 24 24"
                        stroke="currentColor"
                        stroke-width="2"
                    >
                        <path
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
                        />
                    </svg>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
const courses = ref([
    {
        name: '形势与政策',
        teacher: '老师'
    },{
        name:'编译原理实验',
        teacher: '老师'
    },{
        name:'计算机网络实验',
        teacher: '老师'
    },{
        name:'离散数学III',
        teacher: '老师'
    },{
        name:'人工智能II',
        teacher:'老师'
    }
])


</script>


